<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getDisplayNewsList } from "@/api/news";

const router = useRouter();
const route = useRoute()  
//顶部菜单
const navList = [
  { title: "赛事通知", path: "competition" },
  { title: "教师招募", path: "recruit" },
  { title: "系友风采", path: "department" },
  { title: "其他新闻", path: "other" },
];
function mapTypeToNum(typeName) {
  switch (typeName) {
    case "competition":
      return 0;
    case "recruit":
      return 1;
    case "department":
      return 2;
    case "other":
      return 3;
  }
}

//跳转路由并渲染页面
const changeRoute = (navItem) => {
  router.push({ path: "/news/category/" + navItem.path });
  type.value=mapTypeToNum(navItem.path);
  loadPage();
};
//跳转至详情页
const changeToDetail=(id)=>{
  router.push({path:"/news/detail/"+id});
}

//渲染页面
const newsList = ref([]); //新闻数据
const PageSize = 10; //单页显示数量
let currentPage = ref(1); //当前页数
let total = ref(); //申请总数
let type = ref(); //当前新闻类别
const loadPage = async () => {
  try {
    const res = await getDisplayNewsList({
      current: currentPage.value,
      size: PageSize,
      type: type.value,
    });
    console.log(res);
    newsList.value = res.data.data.records;
    total.value = Number(res.data.data.total);
  } catch (e) {
    ElMessage.error(e?.message || "新闻列表获取异常");
  }
};
//获取时间的日期信息
function getDay(date){
  const [year, month, day] = date.split('-');  
      return day;
}
//获取时间的年月信息
function getYearAndMonth(date){
  const [year, month] = date.split('-').slice(0, 2);  
      return `${year}.${month}`;  
}

//分页器
const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadPage();
};
onMounted(() => {
  let currentPath=route.path.split('/').pop();
  type.value=mapTypeToNum(currentPath);
  loadPage();
});
</script>
<template>
  <div class="news-box">
    <div class="news-nav">
      <h3
        v-for="(navItem, index) in navList"
        class="nav-item"
        :class="{ active: $route.path === '/news/category/' + navItem.path }"
        :key="index"
        @click="changeRoute(navItem)"
      >
        {{ navItem.title }}
      </h3>
    </div>
    <div class="news-list">
      <ul class="list-ul">
        <li class="list-item" v-for="newItem in newsList" :key="newItem.id" @click="changeToDetail(newItem.id)">
          <div class="item-left">
            <span class="day">{{ getDay(newItem.releaseTime) }}</span>
            <span class="yearAndMonth">{{ getYearAndMonth(newItem.releaseTime) }}</span>
          </div>
          <div class="item-right">
            <span class="title">{{ newItem.title }}</span>
            <div class="time">
              <span v-if="$route.path === '/news/category/competition'"
                >活动时间:{{ newItem.activityTime }}</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="news-pages">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
        :page-size="PageSize"
        :hide-on-single-page="false"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped lang="less">
.news-box {
  padding-top: 30px;
  padding-bottom: 50px;
}
.news-nav {
  width: 85%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .nav-item {
    font-size: 20px;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-bottom: 5px solid #dddcdc;
    margin-right: 15px;
  }
  .nav-item.active {
    border-bottom: 5px solid #3d99ad;
  }
}
//新闻列表
.news-list {
  width: 85%;
  margin: 15px auto;
  min-height:460px;
  .list-ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    .list-item {
      height: 80px;
      display: grid;
      grid-template-columns: 75px auto;
    }
    .list-item:hover {
      box-shadow: 2px 2px 10px #b9b8b8;
    }
  }
}
.item-left {
  display: flex;
  flex-direction: column;
  padding: 7px;
  background-color: #edf6f6;
  color: #f2e394;
  font-weight: 600;
  .day {
    font-size: 30px;
    text-align: center;
  }
  .yearAndMonth {
    font-size: 16px;
    text-align: center;
  }
}
.item-right {
  display: flex;
  margin-left: 10px;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  // background-color: #f2e394;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .time {
    color: #acaaaa;
    font-size: 14px;
    margin-top: 15px;
  }
}
</style>
